<template>
  <a-form-model ref="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" class="_mt-20">
    <a-form-model-item label="打印设备">
      <SSelect
        :modelValue.sync="deviceId"
        :options="options"
        placeholder="请选择打印设备"
        allowClear
        optionValue="id"
        optionTitle="printerNo"
        :disabled="disabled"
      >
        <template #prefix="{ item }">
          <DictTag :options="Dict.getLocal('terimalStatusDict')" :value="item.terimalStatus" />
          <span class="_ml-10">{{ item.orgName }}</span>
          <span class="_mr-10 _ml-10">-</span>
        </template>
        <template #footer>
          <div class="disFlx flexCenter _pt-8 _pb-8" style="background-color: #FFF;border-top: solid 1px #e5e5e5;">
            <a-button class="_ml-15" type="primary" size="small" @click="handleToDeviceManage">设备管理</a-button>
          </div>
        </template>
      </SSelect>
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import { deviceActList } from '@/api/activity/activity.js'
import DictTag from '@/components/DictTag'
import SSelect from '@/components/Select'

export default {
  components: {
    DictTag,
    SSelect
  },
  props: {
    // 活动ID
    activityId: {
      type: Number | String
    },
    disabled: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      deviceId: undefined,
      options: []
    }
  },
  watch: {
    deviceId(nval){
      let item = this.options.find(v=> v.id === nval);
      this.$emit('change', item);
      this.$store.commit('SET_PRINTERDEVICE', item) // 缓存选择的打印设备
      console.log(item, '打印设备切换');
    }
  },
  methods: {
    async getActivityDeviceList() {
      let { data } = await deviceActList({ activityId: this.activityId, status: 1, size: 1000 ,current: 1});
      this.options = data.records || []

      this.setDefaultPrint();
      const currIndex = this.options.findIndex(v => v.id === this.deviceId);
      if (currIndex === -1 || !this.deviceId) {
        this.deviceId = this.options.length ? this.options[0].id : undefined
      }
    },
    handleToDeviceManage() {
      this.$router.push({
        path: '/activity/activityConfig',
        query: {
          activityId: this.activityId,
          key: 'sign'
        }
      })
    },
    setDefaultPrint() {
      const { printerDevice } = this.$store.state.activity;
      if(printerDevice && printerDevice.activityId == this.activityId){
        this.deviceId = printerDevice.id;
      }
    }
  },
  created() {
    this.getActivityDeviceList()
  }
}
</script>

<style></style>
